<template>
	<view class="container">
		<button :class="buttonClass" @click="handleClockIn">{{ buttonText }}</button>
	</view>
</template>

<script>
	import {
		globalVariable
	} from '../../configMy.js';
	export default {
		name: 'Xiaodu',
		props: {
			teacher: {
				type: Object, // 根据teacher的数据类型进行设置
				required: true
			}
		},
		data() {
			return {
				status: 'morning', // 打卡状态：morning - 早晨未打卡，clockedIn - 上课打卡，clockedOut - 下课打卡，completed - 已完成
				buttonText: '上课打卡', // 按钮文本，默认显示上课打卡
				teacherCheck: {}
			};
		},
		mounted() {
			let that = this;
			const today = new Date();
			const formattedDate = this.formatDateTime(today);
			uni.request({
				url: globalVariable + "/getTeacherCheck?teacherId=" + that.teacher.teacherId + "&date=" +
					formattedDate.split(' ')[0],
				success(res) {
					let info = res.data;
					uni.showToast({
						title: info.message
					})
					if (info.status == 1) {
						that.teacherCheck = info.data
						if (info.data.checkOutTime == "") {
							that.status = 'clockedIn';
							that.buttonText = '下课打卡';

						} else {
							that.status = 'completed';
							that.buttonText = '今天已完成';
						}
					}
					if (info.status == 2) {
						that.status = 'morning';
						that.buttonText = '上课打卡';
						that.teacherCheck = info.data
					}
				}
			})
		},
		methods: {
			formatDateTime(date) {
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，因此需要+1
				const day = String(date.getDate()).padStart(2, '0');
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');
				const seconds = String(date.getSeconds()).padStart(2, '0');
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			async handleClockIn2() {
				let that = this;
				const today = new Date();
				const formattedDate = this.formatDateTime(today);
				const hours = today.getHours();

				if (this.status === 'morning') {
					if ((hours >= 7 && hours < 9) || (hours >= 14 && hours < 16)) {
						// 发送上课打卡请求
						try {
							const response = await uni.request({
								url: globalVariable +
									`/workTeacherCheck?teacherId=${that.teacher.teacherId}&name=${that.teacher.name}&date=${formattedDate.split(' ')[0]}&checkInTime=${formattedDate}&checkOutTime=`,
								method: 'POST',
							});

							const result = response.data;
							uni.showToast({
								title: result.message,
								icon: result.status === 1 ? 'success' : 'none'
							});

							if (result.status === 1) {
								this.status = 'clockedIn';
								this.buttonText = '下课打卡';
							}

						} catch (error) {
							console.error('打卡请求失败', error);
							uni.showToast({
								title: '打卡失败，请稍后重试！',
								icon: 'none'
							});
						}
					} else {
						uni.showToast({
							title: '未到打卡时间',
							icon: 'none'
						});
					}
				} else if (this.status === 'clockedIn') {
					if ((hours >= 11 && hours < 14) || (hours >= 18 && hours < 21)) {
						// 发送下课打卡请求
						try {
							const response = await uni.request({
								url: globalVariable +
									`/restTeacherCheck?id=${that.teacherCheck.id}&checkOutTime=${formattedDate}`,
								method: 'POST',
							});

							const result = response.data;
							uni.showToast({
								title: result.message,
								icon: result.status === 1 ? 'success' : 'none'
							});

							if (result.status === 1) {
								this.status = 'completed';
								this.buttonText = '今天已完成';
							}

						} catch (error) {
							console.error('打卡请求失败', error);
							uni.showToast({
								title: '打卡失败，请稍后重试！',
								icon: 'none'
							});
						}
					} else {
						uni.showToast({
							title: '未到打卡时间',
							icon: 'none'
						});
					}
				}
			},
			handleClockIn() {
				let that = this;
				uni.showModal({
					title: '大辛辅导班打卡提示',
					content: '确定打卡吗？',
					cancelText: "取消", // 取消按钮的文字
					confirmText: "确认", // 确认按钮的文字
					showCancel: true, // 是否显示取消按钮，默认为 true
					confirmColor: '#f55850',
					cancelColor: '#39B54A',
					success: (res) => {
						if (res.confirm) {
							that.handleClockIn2()
						} else {

						}
					}
				})
			}
		},
		computed: {
			buttonClass() {
				return this.status === 'morning' ? 'btn btn-offline' : 'btn btn-online';
			}
		}
	};
</script>

<style scoped>
	.container {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	button {
		padding: 10px 20px;
		color: #fff;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		transition: background 0.3s ease;
	}

	.btn-offline {
		background-color: #ff5a5a;
		opacity: 0.8;
		/* 橙红色 */
	}

	.btn-online {
		background-color: #03c886;
		opacity: 0.8;
		/* 抹茶绿 */
	}
</style>